<template>
  <div class="bg h-537 pt-132 text-center">
    <div class="">
      <h1 text-44>插件下载中心</h1>
      <div class="text-#5F6368 text-20 mt-32 mb-88">
        一键获取熵付通官方插件，快速集成支付功能到您的网站、电商平台或应用程序
      </div>
      <div w-800 m-auto relative class="input-wrap">
        <el-input
          v-model="keyword"
          placeholder="搜索插件（如：WordPress、微信支付、支付宝）"
          style="height: 63px"
          text-18
          pl-24
        >
        </el-input>
        <el-button type="primary" @click="emit('search')">搜索</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const emit = defineEmits(['search'])
const keyword = defineModel()
</script>

<style scoped lang="scss">
.bg {
  background: linear-gradient(106deg, #f1f7ff 0%, #e4efff 99%);
  .input-wrap {
    :deep(.el-input__wrapper) {
      border-radius: 50px;
    }
    .el-button {
      position: absolute;
      right: 22px;
      top: 50%;
      height: 53px;
      width: 107px;
      border-radius: 31px;
      transform: translateY(-50%);
      font-size: 16px;
    }
  }
}
</style>
